<template><van-nav-bar title="摩友圈">
		<template #right>
			<van-icon name="plus" size="20px" color="#FD5102" @click="publish"></van-icon>
		</template>
	</van-nav-bar>
	<!-- 排序选择 -->
	<van-dropdown-menu>
		<van-dropdown-item v-model="select" :options="option" @change="onSelect" />
	</van-dropdown-menu>
	<view class="blog-page">
		<h3 style="text-align: left; padding:20rpx">热门圈子</h3>

		<!-- 博客分类区 -->
		<view class="moto-circle">
			<view class="moto-circle-item" v-for="v,k in circleList" @click="Go_circle_blog(v.id,v.title)">
				<image :src="v.img" mode="widthFix"></image>
				<text>{{v.title}}</text>
			</view>
			<button class="all" @click="Go_circle_blog('','')">全部圈子</button>
		</view>

		<!-- 博客内容区 -->
		<view class="dynamic-wrap">
			<h3 style="text-align: left; margin-top: 10rpx;">热门动态</h3>

			<view class="dynamic-item" v-for="v in bolgList">
				<!-- 作者信息部分 -->
				<view class="dynamic-top">
					<view :id="v.uid">
						<image :src="v.photo" mode="widthFix"></image>
						<text>{{v.nickname}}</text>
					</view>
					<van-button size="small" round icon="plus" plain color="#F92672" @click="onFocus
">关注</van-button>
				</view>

				<!-- 文章标题 -->
				<h3>{{v.bolgTitle}}</h3>
				<!-- 文章照片部分 -->
				<view class="dynamic-imgs" @click="Go_bolginfo(v.bolgId)">
					<image :src="v.imgs" mode="widthFix"></image>
				</view>
				<!-- 时间 点赞  -->
				<view class="dynamic-bottom">
					<!-- 发布时间 -->
					<text>{{v.pubTime}}</text>
					<van-icon name="good-job-o" size="25px" color="#818181" @click="onlike">{{v.like}}</van-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import $api from '../../request/index.js'
	import {
		ref
	} from 'vue'
	import {
		showSuccessToast,
		showToast
	} from 'vant';

	const select = ref(1)
	const option = [{
			text: '发表时间',
			value: 1
		},
		{
			text: '文章浏览量',
			value: 2
		}
	];





	let circleList = ref([{
			img: '../../static/moto-circle/1.png',
			title: '西安-陕拾叁',
			sort: '西安',
			id: 1
		},
		{
			img: '../../static/moto-circle/2.png',
			title: '疯狂的牌照',
			sort: '疯狂的牌照',
			id: 2
		},
		{
			img: '../../static/moto-circle/3.png',
			title: '最美女骑士',
			sort: '最美骑士',
			id: 3
		},
		{
			img: '../../static/moto-circle/4.png',
			title: '二手装备',
			sort: '二手装备交易',
			id: 4
		},
		{
			img: '../../static/moto-circle/5.png',
			title: '头盔控',
			sort: '头盔控',
			id: 5
		},
		{
			img: '../../static/moto-circle/6.png',
			title: '摩友帮选车',
			sort: '摩友帮选车',
			id: 6
		},
		{
			img: '../../static/moto-circle/7.png',
			title: '摩旅日记',
			sort: '摩旅日记',
			id: 7
		},
		{
			img: '../../static/moto-circle/8.png',
			title: '好装备推荐',
			sort: '好装备推荐',
			id: 8
		},
	])

	let bolgList = ref([])

	onShow(() => {
		$api.get('/moto/bolg').then(res => {
			console.log(res.data)
			bolgList.value = res.data

		})
	})


	const publish = () => {
		uni.navigateTo({
			url: '../publish/publish'
		})
	}

	const onSelect = (value) => {
		console.log(value)
		switch (value) {
			case 1: // 根据热门查找文章
				$api.get('/moto/bolg').then(res => bolgList.value = res.data)
				break;
			case 2: // 根据浏览量查找文章
				$api.get('/moto/bolg/hot').then(res => bolgList.value = res.data)
				break;
		}
	}


	// 收藏
	const onFocus = () => {
		uni.showToast({
			icon: 'success',
			title: '关注成功'
		})
	}

	// 点赞
	const onlike = () => {
		showToast({
			message: '给你点个赞',
			icon: 'good-job-o',
		});
	}

	// 跳转详情
	const Go_bolginfo = id => {
		uni.navigateTo({
			url: '/pages/bolg_info/bolg_info' + '?id=' + id,
		})
	}
	// 跳转圈子
	const Go_circle_blog = (id, title) => {
		uni.navigateTo({
			url: '/pages/select-circle/select-circle?id=' + id + '&title=' + title
		})
	}
</script>

<style>
	.blog-page {
		height: calc(100vh - 144px);
		overflow-y: scroll;
	}

	.moto-circle {
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.moto-circle-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 22%;
	}

	.moto-circle-item>text {
		margin: 20rpx 0;
		text-align: center;
		font-size: 14px;
	}

	.moto-circle-item>image {
		width: 140rpx;
		height: 140px;
		border-radius: 20rpx;
	}

	.all {
		width: 90%;
		border-radius: 20px;
	}

	.dynamic-wrap {
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.dynamic-item {
		box-sizing: border-box;
		padding: 20rpx 0;
	}

	.dynamic-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx 0;
	}

	.dynamic-top>view {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.dynamic-top image {
		width: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.dynamic-imgs {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		margin: 10rpx 0;
	}

	.dynamic-imgs>image {
		width: 100%;
		margin-bottom: 10rpx;
		border-radius: 15rpx;
	}

	.dynamic-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.dynamic-bottom>text {
		font-size: 14px;
		color: #808080;
	}
</style>